<template>
  <div class='search-index'>
    <!-- 搜索框 -->
    <van-search
      v-model="searchText"
      placeholder="请输入搜索关键词"
      @focus="isSeachSuggsetShow = true"
      @search="setSearchSongsPrerequisite(searchText)"
    >
      <template #left>
        <div class="leftIcon" @click="back">
          <van-icon name="arrow-left" />
        </div>
      </template>
    </van-search>
    <!-- / 搜索框 -->

    <!-- 搜索详情 -->
    <van-tabs
      v-if="isSearchResultShow"
      v-model="tabsIndex"
    >
      <van-tab title="歌曲">
        <searchResult-song
         :searchText="onSearchText"
        />
      </van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
    <!-- / 搜索详情 -->

    <!-- 搜索建议 -->
    <search-suggset
      @onSearchSongs="setSearchSongsPrerequisite($event)"
      @isSearchSuggsetShow="isSeachSuggsetShow = $event"
      :searchText="searchText"
      v-if="isSeachSuggsetShow"
    />
    <!-- / 搜索建议 -->

    <!-- 搜索历史 -->
    <search-history
      v-show="!isSearchResultShow"
      @setSearchText="searchText = $event"
      :searchHistorys="searchHistorys"
    />
    <!-- / 搜索历史 -->

    <!-- 控制台 -->
    <audio-component
      @storagePlayingSongList="storagePlayingSongList"
      @showPopup="isShowPopup = true"
    />
    <!-- / 控制台 -->

    <van-popup
      v-model="isShowPopup"
      closeable
      close-icon="arrow-down"
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <played-view
        @storagePlayingSongList="storagePlayingSongList"
      />
    </van-popup>
  </div>
</template>

<script>
import { Search, Icon, Tab, Tabs, Popup } from 'vant'
import searchHistory from './components/searchHistory'
import searchSuggset from './components/searchSuggest'
import searchResultSong from './components/searchResult-song'
import audioComponent from '@/components/songComponent/audioComponent'
import playedView from '@/components/playedView/'

export default {
  name: 'search-index',
  components: {
    [Search.name]: Search,
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Popup.name]: Popup,
    searchHistory,
    searchSuggset,
    searchResultSong,
    audioComponent,
    playedView
  },
  props: {},
  data () {
    return {
      tabsIndex: 0,
      searchText: '', // 搜索框内显示的关键字
      onSearchText: '', // 触发搜索的关键字
      searchHistorys: [], // 历史搜索
      isSearchResultShow: false, // 是否显示搜索结果页面
      isSeachSuggsetShow: false, // 是否显示搜索建议页面
      isShowPopup: false
    }
  },
  computed: {},
  watch: {
    // 监控搜索框内的关键词是否为空时，做出判断
    searchText: function () {
      if (this.searchText.trim() === '') {
        this.isSeachSuggsetShow = false
        this.isSearchResultShow = false
      } else {
        this.isSeachSuggsetShow = true
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 触发子组件进行歌曲的搜索的必要条件；点击 联想词 和 回车 都可改变
    setSearchSongsPrerequisite (name) {
      this.isSearchResultShow = true
      this.isSeachSuggsetShow = false
      this.searchText = name
      this.onSearchText = name
      // 将搜索的歌曲名字存入搜索历史记录；如果先前搜索过，先删除
      const index = this.searchHistorys.indexOf(name)
      if (index !== -1) {
        this.searchHistorys.splice(index, 1)
      }
      this.searchHistorys.unshift(name)
    },
    storagePlayingSongList () {
      this.$store.commit('setPlayStatus', false)
    },
    // 返回上一层；如果搜索框内有值，先清除，不返回；无值，则返回
    back () {
      if (this.searchText) {
        this.searchText = ''
        this.onSearchText = ''
        return
      }
      this.$router.back()
    }
  }
}
</script>
<style lang='less' scoped>
.search-index {
  /deep/ .van-tabs--line .van-tabs__wrap {
    height: 30px;
  }
  .leftIcon {
    font-size: 22px;
    width: 25px;
    margin-left: -5px;
  }
}
</style>
